<template>
    <div class="topNav">
        <div class="left-icon">
            <van-icon name="wap-nav" size="0.5rem" />
        </div>
        <div class="tabs">
            <span @click="handleMy">
                我的
            </span>
            <span>
                发现
            </span>
            <span>
                云村
            </span>
            <span>
                视频
            </span>

        </div>
        <div class="right-icon">
<van-icon name="search" size="0.5rem" @click="handleSearch"/>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
setup() {
    const router=useRouter()
function handleSearch(){
router.push("/search")
}
function handleMy(){
    router.push("/my")
}
return {
    handleSearch,
    handleMy
};
},
});
</script>

<style lang="less" scoped>
.topNav{
    display: flex;
    padding: 0.3rem;
    flex-wrap: nowrap;
    gap: 18px;
    align-items: center;
}
.left-icon{
    position: fixed;
    left: 0.15rem;
}
.right-icon{
    position: fixed;
    right: 0.15rem;
}
.tabs{
    display: flex;
    gap: 0.8rem;
    margin: auto;
  
}
</style>